[포스코x코딩온] 웹 풀스택 과정 7기 3주차 수요일 회고

조별과제

5명씩 팀을 꾸려 팀끼리 사이트 하나를 정해 FrontEnd를 구현하는 과제가 주어졌다.
우리팀은 인스타그램을 클론 코딩하기로 했다.
파트를 정해 작업을 나누었는데, 나는 DM 페이지를 맡았다.

DM 페이지

DM 페이지는 수많은 이용자와 메세지가 쌓인다.
그렇기에 HTML과 CSS를 간결하면서 많은 부분을 커버할 수 있도록 작성해야겠다고 생각했다.
큰 틀은 모두 HTML과 CSS로 작성했고, JS는 DB를 받아오듯 JSON 데이터를 받아와서 사용자와 메세지를 채워넣는 부분만 사용했다. DM 페이지 스크린샷

flex

flex를 많이 사용하는 것은 알았지만 이렇게 많이 사용되는 줄은 몰랐다.
클론 코딩을 위해 인스타그램 DM 페이지를 열심히 뒤져보니 대부분의 요소들이 display: flex로 되어있었다.
다량의 메세지부터 간단한 중앙정렬까지 모두 flex로 구현했었다. 마침 이전 회고 중 flex에 대해 정리한 적이 있어서 많은 도움이 되었다.

reverse 정렬 시 flex-end 오류

DM 페이지는 가장 최근 메세지를 맨 밑에서 보여준 뒤 아래로 스크롤하며 위로 올라가는 방식으로 구현했다.
이를 구현하기 위해 flex-direction: column-reverse를 사용했는데, 이 때 justify-items: flex-end를 사용하면 스크롤이 불가능한 오류가 발생했다.
검색해 보니 이 글에서 justify-content: flex-end 대신 첫번째 flex 컨테이너의 첫번째 자식에게 margin-top: auto를 주면 된다는 답변을 찾을 수 있었다.

.dm.list {
  display: flex;
  flex: 1 1 0; /* 내용물이 많아져도 늘어나지 않도록 */
  overflow-y: auto; /* 세로 스크롤 */
  flex-flow: column nowrap; /* 세로로 쌓기 */
}
 
.dm.list>.dm:first-child {
  margin-top: auto !important; /* 스크롤 가능하게 */
}

이렇게 수정했더니 문제 없이 스크롤이 가능했다.

밑에서부터 스크롤하기

평소에 보는 DM 페이지는 가장 최근 메세지가 맨 밑에 있고 위로 올라가는 방식이다.
이를 JS 없이 구현하고 싶었으나 검색해봐도 JS 없이 구현하는 방법은 찾을 수 없었다.
그래서 이 글을 참고하여 JS로 구현했다.

dms.scrollTop = dms.scrollHeight;

한 줄로 간단하게 구현할 수 있었다.

Chomu's Blog.